<template>
  <div class="monitor-list-model">
    <ul class="list-model-wrapper">
      <li v-for="(item, i) in videoListInfo" :key="i">
        <div class="video-play" @click="playMonitor">
          <img style="width: 100%;height: 100%;" :src="item.realTimePicture" alt="">
          <div class="cover">
            <div class="play-icon">
              <i style="color: white;text-align: center" class="icon iconfont  iconicon_play-copy"></i>
            </div>
          </div>
        </div>
        <div class="course-title">
          <p>{{ item.name }}</p>
        </div>
        <div class="course-teach">
          <p>教师：{{ item.teacher }}</p>
          <p>班主任：{{ item.director }}</p>
        </div>
        <div class="course-detail">
          <p>学生人数：{{ item.studentCount }}人</p>
          <p style="color: #DB4649">总分：{{ item.scoreCount }}分</p>
        </div>
      </li>
      <li class="blank"></li>
    </ul>
  </div>
</template>

<script>
import httpInterface from "../utils/httpInterface";
import { errorMessage } from "../utils/validate";

export default {
  name: "monitorListModel",
  data() {
    return {
      videoListInfo: [],
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      pages: null
    }
  },

  mounted() {
    this.getMonitorList();
  },

  methods: {
    playMonitor() {
      this.$parent.showMonitorIf()
    },

    getMonitorList(data) {
      let _this = this;
      let { pageData } = this;
      let params = {
        page: pageData.pageNum,
        size: pageData.pageSize
      };
      if (data && data.classNo) {
        params.classNo = Number(data.classNo);  // 班级
      }
      if (data && data.grade) {
        params.grade = Number(data.grade);  // 年级
      }
      if (data && data.sub) {
        params.sub = Number(data.sub);  // 专业
      }
      httpInterface.requestPost(httpInterface.URL_CLASS_LIST, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          body.rows.forEach(item => {
            item.realTimePicture = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590580564772&di=14411442a9f90b30c09827618ff9ea18&imgtype=0&src=http%3A%2F%2Ffs.zhenjiang365.cn%2Fbbsatt%2Fday_130605%2F1306051048132822cf96d65718.jpg"
          })
          _this.videoListInfo = body.rows;
          _this.pages = body.pages;
          _this.pageData.total = body.total;
        } else {
          errorMessage("实时监控数据获取失败！");
        }
      }, err => {
        errorMessage("实时监控数据获取失败！");
      }, true)
    }
  }
}
</script>

<style scoped lang="scss">
.monitor-list-model {
  .list-model-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .blank {
      width: 270px;
      padding: 0;
      background: transparent;
    }

    li {
      margin-bottom: 20px;
      padding: 20px;
      box-sizing: border-box;
      background: white;
      border-radius: 4px;
      width: 31.7%;

      .video-play {
        width: 100%;
        height: 163px;
        position: relative;
        margin-bottom: 15px;
        cursor: pointer;

        .cover {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          background: rgba(0, 0, 0, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;

          .play-icon {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            display: flex;
            cursor: pointer;
            justify-content: center;
            background: rgba(0, 0, 0, 0.41);
          }
        }
      }

      .course-title {
        width: 222px;
        margin-bottom: 14px;
        font-weight: 400;
        font-size: 16px;
      }

      .course-teach {
        display: flex;
        margin-bottom: 6px;
        justify-content: space-between;

        p {
          font-size: 14px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }

      .course-detail {
        display: flex;
        justify-content: space-between;

        p {
          font-size: 14px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
}
</style>
